<template>
    <el-form :inline="true" :model="pageHelper" class="demo-form-inline">
        <el-form-item label="用户ID">
            <el-input v-model="pageHelper.userId" placeholder="请输入用户ID" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">搜索</el-button>
        </el-form-item>
    </el-form>
    <!-- <el-button type="primary" @click="toggleSelection()">删除选中</el-button> -->
    <!-- <el-table :data="state.list" border style="width: 100%" @selection-change="handleSelectionChange"> -->
    <el-table :data="state.list" border style="width: 100%" show-summary :summary-method="getSummaries">
        <!-- <el-table-column type="selection" width="55" /> -->
        <el-table-column prop="id" label="ID" width="100" />
        <el-table-column prop="userId" label="用户ID" width="100" />
        <el-table-column prop="userName" label="用户名" width="100" />
        <el-table-column prop="goodsId" label="商品ID" width="100" />
        <el-table-column prop="goodsName" label="商品名" width="100" />
        <el-table-column prop="goodsPrize" label="商品价格" width="100" />
        <el-table-column prop="count" label="数量" width="100" />
        <el-table-column prop="addressName" label="地址" width="100" />
        <el-table-column prop="subtotal" sortable label="小计" min-width="100" />
        <!-- <el-table-column label="操作" min-width="150">
            <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
        </el-table-column> -->
    </el-table>
    <div class="example-pagination-block">
        <el-pagination layout="prev, pager, next" :total="pageHelper.total" :page-size="pageHelper.pageSize"
            :current-page="pageHelper.currentPage" @current-change="handleCurrentChange" />
    </div>
</template>
  
<script lang="ts" setup>
import { reactive, onMounted, ref } from 'vue'
import axios from 'axios'
import { useRouter } from "vue-router"
import { ElTable, TableColumnCtx } from 'element-plus'

const router = useRouter();

const pageHelper = reactive({
    userId: '',//用户ID
    total: 10, // 总数据量
    pageSize: 2, // 每页显示的数据数量
    currentPage: 1, // 当前页码
})

const state = reactive({
    list: [] as any
})

onMounted(() => {
    // 页面加载完成后自动触发查询，假设初始页码为 1
    handleCurrentChange(1);
});


const onSubmit = () => {
    handleCurrentChange(pageHelper.currentPage)
}

function handleCurrentChange(page: number): void {
    // 更新页码
    pageHelper.currentPage = page;
    // 在这里可以根据当前页码，请求对应的数据
    // 例如：fetchData(page);
    // 发送 Axios 请求
    axios.get('http://localhost:8083/orders/getOrdersList', {
        params: {
            pageNum: page,
            userId: pageHelper.userId,
            pageSize: pageHelper.pageSize
        }
    })
        .then(response => {
            // 请求成功，处理返回的数据
            // 更新数据
            pageHelper.total = response.data.total;
            state.list = response.data.list;
            // 其他操作...
        })
        .catch(error => {
            // 请求失败，处理错误信息
            console.error(error);
        });
}

interface Product {
    id: number,
    userId: number,
    userName: string,
    goodsId: number,
    goodsName: string,
    goodsPrize: number,
    count: number,
    addressName: string,
    subtotal: number
}

interface SummaryMethodProps<T = Product> {
    columns: TableColumnCtx<T>[]
    data: T[]
}


const getSummaries = (param: SummaryMethodProps) => {
    const { columns, data } = param
    const sums: string[] = []
    columns.forEach((column, index) => {
        if (index === 0) {
            sums[index] = '合计'
            return
        }
        const values = data.map((item) => Number(item[column.property as keyof Product]))
        if (index === 8) {
            sums[index] = `${values.reduce((prev, curr) => {
                const value = Number(curr)
                if (!Number.isNaN(value)) {
                    return prev + curr
                } else {
                    return prev
                }
            }, 0)}`
        }
    })

    return sums
}

// const convertGender = (gender: string) => {
//     return gender === '男' ? '1' : '0';
// };


// const handleEdit = (index: number, row: any) => {
//     // 在这里编写编辑方法的逻辑
//     // 路由跳转并传递参数
//     router.push({
//         name: 'UserEdit', params: {
//             id: row.id,
//             userName: row.userName,
//             userPwd: row.userPwd,
//             gender: convertGender(row.gender),
//             roleId: row.roleId
//         }
//     });
// };

// const handleDelete = (index: number, row: any) => {
//     // 在这里编写删除方法的逻辑
//     axios.delete(`http://localhost:8081/user/deleteUser/${row.id}`)
//         .then(response => {
//             alert(response.data.msg)
//             // 在这里编写删除成功后的逻辑
//             // 从表格中删除行数据
//             handleCurrentChange(pageHelper.currentPage)
//         })
//         .catch(error => {
//             console.error(error);
//             // 在这里编写删除失败后的逻辑
//         });
// };

// interface User {
//     id: number,
//     userName: string,
//     userPwd: string,
//     gender: number,
//     roleId: number
// }
// const ids = ref<number[]>([]); // 存放选中行数据的 id 值数组
// const toggleSelection = () => {
//     if (!ids.value.length) {
//         alert("请选择要删除的数据")
//         return
//     }
//     axios.post('http://localhost:8081/user/deleteUserByIds', { ids: ids.value })
//         .then(response => {
//             // 处理响应数据
//             alert(response.data.msg)
//             handleCurrentChange(pageHelper.currentPage)
//         })
//         .catch(error => {
//             // 处理错误
//             console.error(error)
//         });
// }
// const handleSelectionChange = (val: User[]) => {
//     ids.value = val.map(user => user.id); // 取出选中行数据的 id 值
// }
</script>
  
  
<style scoped>
.example-pagination-block+.example-pagination-block {
    margin-top: 10px;
}

.example-pagination-block .example-demonstration {
    margin-bottom: 16px;
}
</style>